<template>
  <el-dialog
    width="80%"
    v-model="visible"
    @closed="onReset"
    append-to-body
    :title="`${dialogDatas.datas?.projectName} [检测值:${dialogDatas.datas?.projectValue}]`"
    class="packageDialog"
  >
  <template #title>
    <p class="el-dialog__title">
      <span>{{ `${dialogDatas.datas?.projectName} [检测值`}}</span>
      <span :class="getColorClass2(dialogDatas.datas.status)">{{ dialogDatas.datas?.projectValue }}</span>
      <span>]</span>
    </p>
    </template>
    <el-descriptions :column="3" direction="vertical" border>
      <el-descriptions-item label="参数" align="center">{{
        dialogDatas.datas.projectName
      }}</el-descriptions-item>
      <el-descriptions-item label="标准" align="center">{{
        dialogDatas.datas.standard
      }}</el-descriptions-item>
      <el-descriptions-item label="数值" align="center">
        <!-- <template > -->
            <span :class="getColorClass2(dialogDatas.datas.status)">{{ dialogDatas.datas.projectValue }}</span>
        <!-- </template> -->
      </el-descriptions-item>
      <el-descriptions-item style="margin: 22px 30px;" v-if="dialogDatas.datas.noteData">
        <div>
          <div class="title">{{dialogDatas.datas?.projectName}}</div>
          <div class="text">{{ dialogDatas.datas.noteData.normal }} </div>
        </div>
        <div style="margin-top: 18px;" v-if="dialogDatas.datas.noteData.hazard">
          <div class="title">{{dialogDatas.datas?.status===1?'减低':'升高'}}</div>
          <div class="text">{{ dialogDatas.datas.noteData.hazard }} </div>
        </div>
        <div style="margin-top: 18px;" v-if="dialogDatas.datas.noteData.suggest">
          <div class="title">建议</div>
          <div class="text">{{ dialogDatas.datas.noteData.suggest }} </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin-top: 30px;">
      <div class="title">历史检测记录 <span style="font-size: 14px;color: #666;">(标准值{{ dialogDatas.datas.standard }})</span> </div>
      <!-- <div v-if="visible" ref="pieChart" :style="{  height: '300px' }"></div> -->
      <echarts v-if="showEcharts" :chartDatax="chartDatax" :chartDatay="chartDatay" :standard="standard"/>
    </div>
    <template #footer>
      <span class="dialog-footer flex justify-center my6">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted,toRef } from 'vue';
// import * as echarts from 'echarts';
import echarts from "@/components/Echarts/src/EChartsline.vue";
const visible = ref(false);

const formRef = ref();
let dialogDatas = ref({});
let standard=reactive({
  max:null,
  min:null
})
const showEcharts = ref(true)
const init = (data?: object) => {
  visible.value = true;
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));
  standard.max=dialogDatas.value.datas.max
  standard.min=dialogDatas.value.datas.min
  initPieEcharts();
  
  // echartData 图表数据
};

var chartDatax = toRef([]);
var chartDatay = toRef([]);
var chartDatayy = reactive([]);
const onReset = () => {
  chartDatax.value=[]
  chartDatay.value=[]
  showEcharts.value = false;
  if (!formRef.value) return;
  formRef.value.resetFields();
};
const getColorClass2 = (value:any) =>{
  if (value ===1) {
    return "blue"; 
  } else if (value ===2) {
    return "red";
  } else {
    return "gray"; 
  }
}

function initPieEcharts() {
  showEcharts.value = false;
  if(dialogDatas.value.datas.items.length > 0) {
    dialogDatas.value.datas.items.map((item, index) => {
      chartDatay.value.push(item.value*1)
      chartDatax.value.push(item.time)
    })
  }
  chartDatayy=chartDatay.value.push(dialogDatas.value.datas.max,dialogDatas.value.datas.min)
  console.log(chartDatay.value,"chartDatayy")
  showEcharts.value = true;
  // console.log(chartDatax,chartDatay,"initPieEcharts111")
  // echartData 图表数据
  // myChart.value.dispose()
  // setTimeout(()=>{
  //   myChart.value = echarts.init(pieChart.value!);
  //   myChart.value.setOption(option);
  //   // console.log(myChart.value,'1')
  //   // myChart.value.dispose()
  //   // myChart.value = echarts.init(pieChart.value!);
  //   // myChart.value.setOption(option);
  //   // console.log(myChart.value,'2')
  // },20) 
  
  // window.addEventListener('resize', function() {
  //     myChart.resize();
  // });
}
defineExpose({ init });
</script>

<style>
.packageDialog {
}
.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell{
  margin: 22px 30px;
}
.title{
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  margin: 8px 0;
  color: #333333;
  line-height: 19px;
  text-align: justified;
  font-style: normal;
  text-transform: none;
}
.text{
  /* // width: 1030px; */
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 16px;
  text-align: justified;
  font-style: normal;
  text-transform: none;
}
.green {
  color: #04AC00;
}

.yellow {
  color: #ffc200;
}

.red {
  color: #FF1C1C;
}
.blue{
  color: #386BDF;
}
.gray{
  color: #979797;
}
</style>
